<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="${request.getContextPath()}/js/public-head.js"></script>
</head>
<body>

<g:set var="PUUID" value="${Math.round(Math.random()*9999999)}" />
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body">
            <form  class="layui-form" method="post"  >
                <div class="layui-form-item">
                    <label class="layui-form-label">状态编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="typeNo" class="layui-input" lay-verify="required" value="${appBordType?.typeNo}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="typeName" class="layui-input" lay-verify="required" value="${appBordType?.typeName}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">颜色(RGB)</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" name="typeColor" id="typeColor${PUUID}"
                               readonly value="${appBordType?.typeColor}" style="background:rgb(${appBordType?.typeColor})">
                        <%
                            def colorArray =  appBordType.typeColor ?  String.valueOf(appBordType.typeColor).split(","):[0,0,0]
                        %>
                        <div style="text-align: center;display:inline"><br>
                            <p>R:<input  type="range" min="0" max="255" id="r${PUUID}" value="${colorArray[0]?:0}" ></p>
                            <p>G:<input  type="range" min="0" max="255" id="g${PUUID}" value="${colorArray[1]?:0}"  ></p>
                            <p>B:<input  type="range" min="0" max="255" id="b${PUUID}" value="${colorArray[2]?:0}"  ></p>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button  class="layui-btn" lay-submit="*"  lay-filter="*">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


</body>


<script type="text/javascript">
    $("input[type=range][id$=${PUUID}]").change(function(){
        var r = $("#r${PUUID}").val();
        var g = $("#g${PUUID}").val();
        var b = $("#b${PUUID}").val();
        var color = r+","+g+","+b;
        $("#typeColor${PUUID}").val(color).css("background","rgb("+color+")")
    })


    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use([ 'table','form','laydate'], function(){
        var $ = layui.$
        var form = layui.form

        form.on("submit(*)",function(obj){
            var url = "${request.getContextPath()}/appBordType/update";
            $.getJSON(url,obj.field,function(rst){
                if(rst.statusCode == 200){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭   ;
                }else{
                    layer.alert(rst.message,{icon:2})
                }
            })
            return false
        })
    })
</script>
